<template>
	
	<div>
	
		<div style="width: 100%;height: 240px;">
	    	<video width="100%" height="240" controls>
			  <source src="movie.mp4" type="video/mp4">
			</video>
	    </div>
	    
	    <div style="padding: 1rem;border-bottom: solid 1px #CBCBCB;">
	    	<div>课程：《财道》</div>
	    	<div>时间：2018-08-23（4天）</div>
	    	<div>地点：待定</div>
	    	<div>价格：￥39800</div>
	    </div>
	    
	    <!--悬浮按钮-->
	    <div style="width:100%;position: fixed;bottom: 0;z-index: 999999;">
	    	<div>
	    		<group>
			      <x-switch  style="color: #8F3DC5;background: #F7F7F7;"  title="可用0学分抵用0.00元"  v-model="value"></x-switch>
			    </group>
	    	</div>
	    	<div style="padding: 0.5rem 0;">
		    	<flexbox >
			      <flexbox-item :span="2"><div class="flex-demo" style="text-align: right;">
			      	数量：
			      </div></flexbox-item :span="6">
			      <flexbox-item><div  >
				    <div style="border: solid 1px #CBCBCB;padding: 0.4rem 0;">
				    	<flexbox>
					      <flexbox-item><div class="flex-demo" style="border-right: solid 1px #CBCBCB;" @click.stop="reduceNum">
					      	-
					      </div></flexbox-item>
					      <flexbox-item style="margin-left: 0;"><div class="flex-demo" >{{num}}</div></flexbox-item>
					      <flexbox-item><div class="flex-demo" style="border-left: solid 1px #CBCBCB;" @click.stop="addNum">
					      	+
					      </div></flexbox-item>
					    </flexbox>
				    </div>
			      	
			      </div></flexbox-item>
			      <flexbox-item ><div class="flex-demo"></div></flexbox-item>
			   </flexbox>
		    </div>
	    	<div style="font-size: 1.3rem;line-height: 3rem;">
	    		<flexbox>
			      <flexbox-item><div class="flex-demo" style="color: #E30617;">合计：￥39800</div></flexbox-item>
			      <flexbox-item style="margin-left: 0;"><div class="flex-demo" style="background: #8F3DC5;color: #FFFFFF;">结算</div></flexbox-item>
			    </flexbox>
	    	</div>
	    </div>
	    
	</div>
	
	
	
	
</template>

<script>
	
	import { XSwitch, Group } from 'vux'
	
	export default {
		components: {
		    XSwitch,
		    Group
		},
		  
		data (){
			return{
				value:false,
				num:1,
			}
		},
		
		methods:{
			//减少
		    addNum(){
		    	this.num = this.num+1
		    	console.log(this.num)
		    },
		    
		    //增加
		    reduceNum(){
		    	if(this.num > 1){
		    		this.num = this.num-1
		    	}
		    },
		}
		
	}
</script>

<style>
</style>